<template>
  <div class="main">
    <div class="header">
      <div class="number1">
        <img src="../assets/num1.png"
             alt="">
        <div class="right">
          <h3>{{ number1 }}</h3>
          <p>监控机构</p>
        </div>
      </div>
      <div class="number2">
        <img src="../assets/num2.png"
             alt="">
        <div class="right">
          <h3>{{ number2 }}</h3>
          <p>预警通知</p>
        </div>
      </div>
      <div class="number3">
        <img src="../assets/num3.png"
             alt="">
        <div class="right">
          <h3>{{ number3 }}</h3>
          <p>未读预警</p>
        </div>
      </div>
    </div>
    <!-- list -->
    <div class="datalist">
      <!-- 循环 -->
      <div v-for="item in dataList"
           :key="item.uuid">

        <div @click="handleCheck(item)"
             class="card">
          <div class="topLine">
            <div class="title">
              <p>{{ item.enterpriseName }}</p>
            </div>
          </div>
          <div class="textcontent">
            <p>共有预警 <span style="font-size:24px;color:#32b9d0">{{ item.read }}</span> 个</p>
            <p>未读预警 <span style="font-size:24px;color:#32b9d0">{{ item.unread }}</span> 个</p>
          </div>
        </div>
      </div>
      <!-- end -->
    </div>

  </div>
</template>

<script>
import { GetInfoList, GetTipsCount } from '@/api/faq1'
import { v4 as uuidv4 } from 'uuid'

export default {
  data() {
    return {
      number1: 0,
      number2: 0,
      number3: 0,
      dataList: []
    }
  },
  mounted() {
    GetTipsCount(0).then(res => {
      this.number3 = res
    })
    GetTipsCount(1).then(res => {
      this.number1 = res
    })
    GetTipsCount(2).then(res => {
      this.number2 = res
    })
    GetInfoList().then(res => {
      this.dataList = res.map(v => {
        return {
          ...v,
          uuid: uuidv4()
        }
      })
      console.log(' this.dataList===', this.dataList)
    })
  },
  methods: {
    handleCheck(data) {
      console.log('data===', data)
      this.$router.push({ path: 'info', query: data })
    }
  }
}
</script>

<style scoped>
.main {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}

.header {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.number1,
.number2,
.number3 {
  width: 30%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #0f0;
  border-radius: 10px;
}
.number1 img,
.number2 img,
.number3 img {
  display: block;
  width: 30px;
  height: 30px;
}
.number1 {
  border: 1px solid #4ab392;
}
.number2 {
  border: 1px solid #efb760;
}
.number3 {
  border: 1px solid #80bbc9;
}

.right {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0 7px;
  box-sizing: border-box;
}
.right h3 {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  margin: 0;
}
.number1 .right h3,
.number1 .right p {
  color: #4ab392;
}
.number2 .right h3,
.number2 .right p {
  color: #efb760;
}
.number3 .right h3,
.number3 .right p {
  color: #80bbc9;
}
.right p {
  font-size: 14px;
  margin: 0;
}
/*  */
.datalist {
  width: 99%;
  /* border: 1px solid #0f0; */
  min-height: 800px;
}
.datalist .card {
  width: 100%;
  height: 100px;
  /* border: 1px solid #0f0; */
}
.datalist .card .topLine {
  width: 99%;
  height: 30px;
  border-bottom: 1px dotted #999;
}
.datalist .card .title {
  width: 60%;
  height: 30px;
  border-radius: 6px 6px 0 0;
  background: #32b9d0;
  color: #fff;
  margin-left: 10px;
}
.datalist .card .title p {
  font-size: 12px;
  line-height: 30px;
  text-align: center;
}
.textcontent {
  width: 99%;
  height: 40px;
  border-left: 2px solid #32b9d0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
  margin-left: 10px;
}
.textcontent p:nth-child(1) {
  font-size: 16px;
  margin-left: 10px;
  margin-right: 50px;
}
.textcontent p:nth-child(2) {
  font-size: 16px;
}
</style>